import React, { Component } from "react";
import { View, Modal } from "react-native";

import ImageViewer from "react-native-image-zoom-viewer";

import photo1 from "assets/images/erha3.jpg";
import photo2 from "assets/images/erha4.jpg";
// import photo3 from "assets/images/erha5.png";

import Button from "components/Button";
import PageMark from "components/PageMark";

import styles from "./styles";

const images = [
  {
    url: "",
    props: {
      source: photo1,
    },
    freeHeight: true,
  },
  {
    url: "",
    props: {
      source: photo2,
    },
    freeHeight: true,
  },
];

class Photo extends Component {
  state = {
    visible: false,
  };

  localOnChangeVisible = () => {
    const { visible } = this.state;
    this.setState({ visible: !visible });
  };

  render() {
    const { visible } = this.state;
    return (
      <View style={styles.root}>
        <Modal
          visible={visible}
          transparent
          // onRequestClose={this.localOnChangeVisible}
        >
          <ImageViewer
            imageUrls={images}
            onClick={this.localOnChangeVisible}
            renderIndicator={(currentIndex, allSize) => (
              <View
                style={{
                  position: "absolute",
                  left: 0,
                  right: 0,
                  bottom: 38,
                  zIndex: 13,
                  justifyContent: "center",
                  alignItems: "center",
                  backgroundColor: "transparent",
                }}
              >
                <PageMark
                  count={allSize - 1}
                  active={currentIndex - 1}
                  type="mini"
                />
              </View>
            )}
          />
        </Modal>
        <Button onPress={this.localOnChangeVisible}>Click</Button>
      </View>
    );
  }
}

export default Photo;
